import { TreeItem, type TreeData } from './tree-item.tsx';
import styles from './index.module.scss';

const processData: TreeData[] = [
  {
    name: 'systemd',
    pid: 1,
    memory: 4_000,
    cpuOccupy: '0.1%',
    network: '0.5KB/s',
    parentPid: null,
    children: [
      {
        name: 'systemd',
        pid: 2,
        memory: 4_000,
        cpuOccupy: '0.1%',
        network: '0.5KB/s',
        parentPid: 1,
      },
      {
        name: 'systemd',
        pid: 3,
        memory: 4_000,
        cpuOccupy: '0.1%',
        network: '0.5KB/s',
        parentPid: 1,
      },
    ]
  },
  {
    name: 'systemd',
    pid: 1,
    memory: 4_000,
    cpuOccupy: '0.1%',
    network: '0.5KB/s',
    parentPid: null,
    children: [
      {
        name: 'systemd',
        pid: 2,
        memory: 4_000,
        cpuOccupy: '0.1%',
        network: '0.5KB/s',
        parentPid: 1,
      },
      {
        name: 'systemd',
        pid: 3,
        memory: 4_000,
        cpuOccupy: '0.1%',
        network: '0.5KB/s',
        parentPid: 1,
      },
    ]
  },
  {
    name: 'systemd',
    pid: 1,
    memory: 4_000,
    cpuOccupy: '0.1%',
    network: '0.5KB/s',
    parentPid: null,
    children: [
      {
        name: 'systemd',
        pid: 2,
        memory: 4_000,
        cpuOccupy: '0.1%',
        network: '0.5KB/s',
        parentPid: 1,
      },
      {
        name: 'systemd',
        pid: 3,
        memory: 4_000,
        cpuOccupy: '0.1%',
        network: '0.5KB/s',
        parentPid: 1,
      },
    ]
  },
]

export function ProcessTree() {
  return (
    <div className={styles['process-tree']}>
      {processData.map((item) => {
        return (
          <TreeItem key={item.pid} data={item} depth={0} />
        )
      })}
    </div>
  );
}